<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入工单号" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.mo"></el-input>
      <el-input style="width: 300px" placeholder="输入序号SN或者出货码SSN" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.snorssn"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <template v-if="v.key === 'mo_no'">
          <a href="#" @click.prevent="goMoDetail(v.row)" class="text-blue text-bold"> {{ v.row['mo_no'] }}</a>
        </template>
        <template v-else-if="v.key === 'bind_status'">
          <span class=" text-label" v-if="v.row['bind_status'] == 0" :class="statusClass[v.row['bind_status']]"
            @click="handleBs(v.row)">
            {{ status[v.row['bind_status']] }}
          </span>
          <span v-else class="pointer text-label" :class="statusClass[v.row['bind_status']]" @click="handleBs(v.row)">
            {{ status[v.row['bind_status']] }}
          </span>
        </template>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <el-dialog :title="bindListTitle+ '相关拼板序号'" :visible.sync="bindListFlag" width="70%" :before-close="handleClose">
      <div>
        <el-tag class="m-10 tagbg" v-for="(i,t) in bindSnList" :key="t" :type="i==bindListTitle?'':'success'">
          {{i}}</el-tag>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindListFlag = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'moSerialManage',
  data: function () {
    return {
      api: this.$api.bindsn,
      apiList: this.$api.bindsn + 'GetMoSnDetailList',
      name: '工单序号管理',
      columns: [
        { title: '工单号', key: 'mo_no', width: 180, fixed: 'left' },
        { title: '产品序号', key: 'serial_number', width: 180, fixed: 'left' },
        { title: '拼板状态', key: 'bind_status', width: 120 },
        // { title: '拼板唯一码', key: 'bind_code', width: 200 },
        { title: '出货SSN', key: 'shipping_sn', width: 180 },
        { title: '批次数量', key: 'batch_qty', width: 80 },
        { title: '良品数量', key: 'ok_qty', width: 80 },
        { title: '不良数量', key: 'bad_qty', width: 80 },
        { title: '报废数量', key: 'scrap_qty', width: 80 },
        { title: '有效状态', key: 'is_valid', width: 80 },
        { title: '修改人', key: 'modify_user' },
        { title: '修改时间', key: 'modify_time' },
      ],
      tableProps: {
        border: true,
        //opsColWith: 140, //不定义默认80
        hideOperations: true,
      },
      initData: {},
      status: { 0: '未拼板', 1: '已拼板', 2: '已分板' },
      statusClass: { 0: 'bg-gray', 1: 'bg-green', 2: 'bg-yellow' },
      bindSnList: [],
      bindListTitle: null,
      bindListFlag: false,
    }
  },
  methods: {
    // 工单号点击
    goMoDetail(row) {
      this.$store.dispatch('delView', { name: 'moReport' }).then((r) => {
        this.$router
          .push({
            name: 'moReport',
            params: {
              mo: row.mo_no,
            },
          })
          .catch(() => {})
      })
    },
    // 点击拼板查询
    handleBs(row) {
      if (row.bind_status !== 0) {
        this.bindSnList = []
        this.$request(this.api + 'GetSnBindData', { sn: row.serial_number }, 'get', true).then((r) => {
          this.bindSnList = r.bind_sn_list
          this.bindListFlag = true
          this.bindListTitle = row.serial_number
        })
      }
    },
    handleClose() {
      this.bindSnList = []
      this.bindListFlag = false
    },
    fetchParams() {
      this.query = Object.assign({}, this.query, this.$route.params)
    },
  },
  created: function () {
    this.fetchParams()
    this.getList()
  },
}
</script>
<style scoped>
</style>
